<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>指令</title>
    <script type="text/javascript" src="./js/vue.js"></script>
    <style>
        .basic {
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<div id="root">
    <div class="basic" v-show="a">{{name}}</div>
    <div class="basic" v-if="b">{{name}}</div>
    <hr>
    <div>当前N的值是:{{n}}</div>
    <button @click="n++">点我N+1</button>
    <div v-if="n===1">孙悟空</div>
    <div v-else-if="n===2">猪八戒</div>
    <div v-else>沙和尚</div>
    <hr>
    <!--遍历数组-->
    <h3>遍历数组</h3>
    <ul>
        <li v-for="person in persons" :key="person.id">{{person.name}}-{{person.age}}</li>
    </ul>
    <hr>
    <ul>
        <li v-for="(person, index) in persons" :key="index">
            {{index}}-{{person.name}}-{{person.age}}
            <input type="text">
        </li>
    </ul>
    <button @click.once="addPerson">添加一个人</button>
    <hr>
    <!--遍历对象-->
    <h3>遍历对象</h3>
    <ul>
        <li v-for="(v,k) of car" :key="k">{{k}}-{{v}}</li>
    </ul>
    <hr>
    <!--遍历字符串-->
    <h3>遍历字符串</h3>
    <ul>
        <li v-for="(v,k) of str" :key="k">{{k}}-{{v}}</li>
    </ul>
    <hr>
    <!--遍历指定次数-->
    <h3>遍历指定次数</h3>
    <ul>
        <li v-for="(number,index) of 5" :key="index">{{number}}-{{index}}</li>
    </ul>
    <hr>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;

    const vm = new Vue({
        el: '#root',
        data: {
            name: '培立优',
            n: 0,
            a: false,
            b: false,
            persons:[
                {id:'001',name:'张三',age:18},
                {id:'002',name:'李四',age:19},
                {id:'003',name:'王五',age:20},
            ],
            car:{
                name:'布加迪',
                price:'$108',
                color:'black'
            },
            str:'Hello Girl',
        },
        computed: {
        },
        methods: {
            addPerson(){
                const person = {id:'005', name:'马斯克',age:'16'};
                this.persons.unshift(person);
            },
        }
    });
</script>

</html>